<template>
<div class="layerRtb layerRtb-threecolumn">
    <three-title :title="{name: '解绑'}"></three-title>
    <div class="layerRtb-scroll thinScroll" v-scrollHeight = "137">
        <div class="analyItem">
            <p class="analyItemTit tx-center">拆卸</p>
            <div class="analyItemCon">
                <p class="col-md-12" v-for="(item, index) in uninstallList" :key="index"><span class="cLightGray pr8">步骤{{ index+1 }}</span><span>{{ item }}</span></p>
            </div>
        </div>
        <div class="analyItem">
            <p class="analyItemTit tx-center">解绑</p>
            <div class="analyItemCon">
                <div class="col-md-12 flex">
                    <div class="col-md-6">
                        <span class="cRed" v-if="Number(this.twoToThreeInfo.point_state) === 1">已解绑</span>
                        <span class="cRed" v-else>请点击解绑按钮解绑</span>
                    </div>
                    <div class="col-md-6">
                        <el-button type="primary" v-if="Number(this.twoToThreeInfo.point_state) === 0 && Number(this.twoToThreeInfo.camera_state) === 1 && Number(this.twoToThreeInfo.install_state) === 1 && buttonIsShow" @click="submit()">解绑</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layerRtb-footer" style="padding-bottom: 1px;">
        <div class="analyItem">
            <p class="analyItemTit tx-center">综合</p>
            <div class="analyItemCon">
                <span class="cRed">--</span>
            </div>
        </div>
    </div>
</div>
</template>
<script>
// vuex
import { mapGetters, mapMutations } from 'vuex'
// Api
import { upCameraStateForPro } from '../../Resources/Api/index'
export default {
    props: ['type', 'role'],
    data () {
        return {
            uninstallList: [
                '断电', '拆摄像头', '拧螺丝', '拆底座', '填孔', '拍照'
            ],
            buttonIsShow: false
        }
    },
    created () {
        this.buttonType()
    },
    methods: {
        ...mapMutations({
            setUpDatePlate: `SET_UPDATE_PLATE`
        }),
        // 按钮显示与隐藏
        buttonType () {
            if (this.userInfo.as_diquId === 39) {
                if (this.twoToThreeInfo.status === this.type) {
                    this.buttonIsShow = true
                } else {
                    this.buttonIsShow = false
                }
            } else {
                const userLevel = this.userInfo.as_level
                if (userLevel.length > 0) {
                    userLevel.forEach(ele => {
                        if (Number(ele) === 47) {
                            if (this.twoToThreeInfo.status === this.type) {
                                this.buttonIsShow = true
                            } else {
                                this.buttonIsShow = false
                            }
                        }
                    })
                } else {
                    this.buttonIsShow = false
                }
            }
        },
        // 更新点位的信息和监控的信息
        submit () {
            // if (this.pointName === null || this.pointName === undefined) {
            //     this.open('警告', '请填写点位名称之后再提交！！！')
            //     return
            // }
            // if (this.value === null || this.value === undefined) {
            //     this.open('警告', '请选择监控点之后再提交！！！')
            //     return
            // }
            let params = {
                camera_state: 2, // 监控状态
                name: this.twoToThreeInfo.name, // 点位名称
                camera: this.twoToThreeInfo.camera, // 监控点编号
                // id: this.twoToThreeInfo.id, // 点位id
                point_id: this.twoToThreeInfo.id, // 点位id
                region_id: this.leftInfo.region_id, // 地区id
                order_no: this.leftInfo.order_no, // 单号
                remark: this.userInfo.as_jueseName + this.userInfo.as_fullName + '操作归库', // 备注
                opereater: this.userInfo.as_fullName // 操作人
                // begin_date: this.begin_date, // 开始时间
                // end_data: this.end_data, // 结束时间
                // interval: this.interval // 时间间隔
            }
            upCameraStateForPro(params).then((result) => {
                if (Number(result.data.StatusCode) === 0) {
                    this.$router.push(this.$route.matched[1].path)
                    this.setUpDatePlate()
                }
            }).catch((err) => {
                console.log(`解绑摄像头失败，${err}`)
            })
        }
    },
    computed: {
        ...mapGetters(['leftInfo', 'twoToThreeInfo', 'userInfo'])
    }
}
</script>
<style lang="scss">
    .flex{
        display: flex;
        align-items: center
    }
</style>
